Azure AI Bot ServiceとAzure OpenAIを使って「生成AIチャットボット」を作ってみる – 第1回：シンプルな「オウム返し」ボットを作る

Azure AI Bot ServiceとAzure OpenAIを使って「生成AIチャットボット」を作ってみる – 第1回：シンプルな「オウム返し」ボットを作る

「Azure AI Bot Service」を使うと、意外と簡単にチャットボットが作れました。
#チャットボット
#Microsoft Azure
#Microsoft Teams
青柳英明

青柳英明

facebook logohatena logotwitter logo
Clock Icon2023.11.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

みなさん、こんにちは！
福岡オフィスの青柳です。

Microsoft Azureには「Azure AI Bot Service」というチャットボット (会話型AIボット) を作成できるサービスがあります。

今回は、この「Azure AI Bot Service」と生成AIサービス「Azure OpenAI Service」を使って、「生成AIと会話できるチャットボット」を作ってみたいと思います。

「Azure AI Bot Serviceを使うのは初めて」という方も多いと思いますので、ステップ・バイ・ステップ形式で何回かに分けて進めたいと思います。

  • 第1回： シンプルな「オウム返し」ボットを作る ← 当記事です
    • (Azure AI Bot Serviceを触ってみる)
  • 第2回： 生成AIを使って質問に回答できるようにする
    • (Azure OpenAIを組み合わせてみる)
  • 第3回： 社内情報に基づいた回答ができるようにする (公開予定)
    • (Cognitive Searchを使ったRAGを組み込む)

まずは、Azure AI Bot Serviceの使い方を理解するために、生成AIは使わずに、最もシンプルなチャットボットを作成することにします。

作成するのは、こちらの入力した言葉をそのまま返すだけの「オウム返し」ボットです。

作業の流れ

  • (1) 作業に必要な前提環境を準備する
  • (2) チャットボットのアプリケーションを作成する
  • (3) ローカル環境でアプリケーションをテストする
  • (4) Azure上にチャットボット実行環境を構築する
  • (5) Azure環境にアプリケーションをデプロイする
  • (6) Azureポータル画面からチャットボットをテストする
  • (7) Microsoft Teamsから利用できるように設定する
  • (8) Microsoft Teamsから利用してみる

(1) 作業に必要な前提環境を準備する

手元のPC (またはMac) に以下の環境を用意します。

  • Node.js
  • Bot Framework Emulator
  • Azure CLI

Node.js

Azure AI Bot Serviceで動作するアプリケーションは、Microsoftが提供する「Bot Framework SDK」を使って作成します。

Bot Framework SDKが対応しているプログラミング言語は以下の通りです：

  • C# (.NET Core)
  • JavaScript / TypeScript (Node.js)
  • Python (※2023年11月をもってサポート終了予定)
  • Java (※2023年11月をもってサポート終了予定)

今回はJavaScript (Node.js) を使ってアプリケーション作成を行いたいと思います。

Node.jsを使用するにあたって、Bot Framework SDKが用意するJavaScriptテンプレートに含まれるモジュールの互換性の都合で、Node.jsは「バージョン16」を使用します。
公式のインストーラー、あるいはnvmなどを使ってインストールしておいてください。

(私が作業した環境では「v16.20.2」を使用しました)

Bot Framework Emulator

Azure AI Bot Service向けに作成するボットアプリケーション (サーバー側アプリケーション) をローカル環境でテストするために、Microsoftが提供しているツールです。

下記リンク先から入手できますので、インストールしておいてください。

Bot Framework Emulator (Microsoft公式GitHubリポジトリ)
https://github.com/microsoft/BotFramework-Emulator

(私が作業した環境では「v4.14.1」を使用しました)

Azure CLI

Azure環境の作成は基本的にGUI (Azureポータル) から行いますが、一部でAzure CLIが必要になります。

下記リンク先でインストール方法が解説されていますので、参考にして、インストールしておいてください。

Azure CLI をインストールする方法 | Microsoft Learn
https://learn.microsoft.com/ja-jp/cli/azure/install-azure-cli

(私が作業した環境では「2.54.0」を使用しました)

(２) チャットボットのアプリケーションを作成する

アプリケーションの作成はローカル環境で行います。

前述の通り、Node.jsのバージョンが「バージョン16」であることを確認してください。

必要モジュールのインストール・最新化

npmおよびYeomanを最新化しておきます。

npm install -g npm
npm install -g yo

Yeomanジェネレーターをインストールします。 (Bot Framework SDKを使用したアプリケーションコードの雛形を作成してくれるツールです)

npm install -g generator-botbuilder

私が作業した環境では、各モジュールのバージョンは以下のようになりました。

$ npm list -g
├── [email protected]
├── [email protected]
└── [email protected]

アプリケーションの作成

Yeomanジェネレーターを使ってアプリケーションコードの雛形を作成します。

yo botbuilder

ウィザード形式で必要な情報を指定していきます。 今回は、全ての項目でデフォルトを選択します。

$ yo botbuilder

Welcome to the Microsoft Bot Builder generator v4.17.0.

Detailed documentation can be found at https://aka.ms/botbuilder-generator

? What's the name of your bot? → my-chat-bot
? What will your bot do? → Demonstrate the core capabilities of the Microsoft Bot Framework
? What programming language do you want to use? → JavaScript
? Which template would you like to start with? → Echo Bot - https://aka.ms/bot-template-echo
? Looking good.  Shall I go ahead and create your new bot? → Y

ジェネレーターの実行が完了すると、指定したアプリケーションの名前my-chat-botのサブディレクトリが作成されます。

実はこの時点で、作成されたアプリケーションコードの雛形はすぐに実行できるものになっています。 しかし、そのまま使うというのもつまらないので、少しだけ手を加えてみましょう。

my-chat-botディレクトリへ移動します。

cd my-chat-bot

今回選択した「Echo Bot」は、最もシンプルなボットであり、こちらが入力した言葉をそのまま返す、いわゆる「オウム返し」ボットです。 ボットのメイン処理はbot.jsに記述されています。

bot.jsを開いて、11行目と19行目 (ハイライトされた行) を以下のように書き換えてみてください。

  • 11行目： ボットが応答する際のメッセージ「Echo: (こちらの入力)」→「オウム返し： (こちらの入力)」
  • 19行目： ボットが最初に喋るメッセージ「Hello　and welcome!」→「こんにちは、ようこそ！」
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

const { ActivityHandler, MessageFactory } = require('botbuilder');

class EchoBot extends ActivityHandler {
    constructor() {
        super();
        // See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
        this.onMessage(async (context, next) => {
            const replyText = `オウム返し: ${ context.activity.text }`;
            await context.sendActivity(MessageFactory.text(replyText, replyText));
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });

        this.onMembersAdded(async (context, next) => {
            const membersAdded = context.activity.membersAdded;
            const welcomeText = 'こんにちは、ようこそ！';
            for (let cnt = 0; cnt < membersAdded.length; ++cnt) {
                if (membersAdded[cnt].id !== context.activity.recipient.id) {
                    await context.sendActivity(MessageFactory.text(welcomeText, welcomeText));
                }
            }
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });
    }
}

module.exports.EchoBot = EchoBot;

これで、アプリケーションコードの準備は終わりです。

(3) ローカル環境でアプリケーションをテストする

作成したアプリケーションをローカル環境で実行して、「Bot Framework Emulator」を使ってテストします。

現在のディレクトリがmy-chat-botであることを確認して、以下のコマンドを実行します。

npm start

実行に成功すると、以下のようにボットアプリケーションが起動して待受状態になります。

$ npm start

> [email protected] start
> node ./index.js

(node:40725) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)

restify listening to http://[::]:3978

Get Bot Framework Emulator: https://aka.ms/botframework-emulator

To talk to your bot, open the emulator select "Open Bot"

ここで、予めインストールしておいた「Bot Framework Emulator」を起動します。

「Open Bot」ボタンをクリックします。

「Bot URL」に以下のように入力します。

  • Bot URL: http://localhost:3978/api/messages

その他の項目はデフォルトのままにして、「Connect」ボタンをクリックします。

アプリケーションが正常に動作していれば、以下のようにボットの「こんにちは、ようこそ！」メッセージが表示されるはずです。

ボットに対して何か入力してみます。

このように「オウム返し」してくれれば、アプリケーションの動作確認はOKです。

テストが終わりましたら、npm startコマンドで実行したアプリケーションは「Ctrl+C」 (Macの場合は「Control+C」) で終了してください。

(4) Azure上にチャットボット実行環境を構築する

ローカル環境でのテストに成功しましたので、次は、Azure環境でボットアプリケーションを動かしてみましょう。

まずは、ボットアプリケーションの実行に必要なAzureリソースを作成します。

構築する環境は下図のようになります。

「App Service Plan」の作成

Azureポータル画面で「すべてのサービス」を開き、カテゴリ「Web & Mobile」にある「App Serviceプラン」をクリックします。

「App Serviceプラン」の画面が開きますので、上部メニューにある「作成」をクリックします。

必要な情報を入力します。

項目名 設定値
プロジェクトの詳細 サブスクリプション リソース作成先のサブスクリプションを選択
リソースグループ リソース作成先のリソースグループを選択
App Serviceプランの詳細 名前 任意の名前を指定 (例：kumamon-chatbot-asp)
オペレーティングシステム Linux
地域 Japan East
価格レベル 価格プラン Basic B1
ゾーン冗長 ゾーン冗長 無効 (変更不可)

入力しましたら「確認および作成」をクリックします。

確認画面で検証に成功したことを確認して、「作成」をクリックします。

これで「App Serviceプラン」の作成は完了です。

「App Service」の作成

Azureポータル画面で「すべてのサービス」を開き、カテゴリ「Web & Mobile」にある「App Service」をクリックします。

「App Service」の画面が開きますので、上部メニューにある「作成」をクリックします。 プルダウンメニューから「Webアプリ」を選択します。

必要な情報を入力します。

項目名 設定値
プロジェクトの詳細 サブスクリプション リソース作成先のサブスクリプションを選択
リソースグループ リソース作成先のリソースグループを選択
インスタンスの詳細 名前 任意の名前を指定 (例：kumamon-chatbot-app)
公開 コード
ランタイムスタック Node 16 LTS
オペレーティングシステム Linux
地域 Japan East
価格プラン Linuxプラン (Japan East) 前の手順で作成したApp Service Planを選択
価格プラン Basic B1 (選択したApp Service Planの価格プランが表示される；変更不可)
ゾーン冗長 ゾーン冗長 無効 (変更不可)

入力しましたら「確認および作成」をクリックします。 (今回は「データベース」以降のタブは全てデフォルトのままにします)

確認画面で検証に成功したことを確認して、「作成」をクリックします。

これで「App Service」の作成は完了です。

「Bot Service」の作成

Azureポータル画面で「すべてのサービス」を開き、カテゴリ「AI & Machine Learning」にある「Bot Service」をクリックします。

「Azure AI service | ボットサービス」の画面が開きます。 (左側のメニューで「ボットサービス」が選択された状態であることを確認します)

上部メニューにある「作成」をクリックします。

「Bot Services」画面が開きます。

一番下までスクロールして「さらに読み込む」をクリックします。

「下へスクロール」「『さらに読み込む』をクリック」を繰り返します。 リストに「Azure Bot」が現れますので、クリックします。

「Azure Bot」画面が開きます。

「プラン」より「Azure Bot」を選択して、「作成」をクリックします。

必要な情報を入力します。

項目名 設定値
プロジェクトの詳細 ボットハンドル 任意の名前を指定 (例：kumamon-chatbot-bot)
サブスクリプション リソース作成先のサブスクリプションを選択
リソースグループ リソース作成先のリソースグループを選択
データ所在地 グローバル
価格レベル 価格プラン Standard
Microsoft App ID アプリの種類 ユーザー割り当て済みマネージドID
作成の種類 新しいMicrosoftアプリIDの作成

入力しましたら「確認および作成」をクリックします。

確認画面で検証に成功したことを確認して、「作成」をクリックします。

Bot Serviceのデプロイ (作成) が行われ、完了画面が表示されます。

ここで、Bot Serviceリソースと併せて「マネージドID」というリソースが作成されていることに注目します。 (次の手順で使います)

これで「Bot Service」の作成は完了です。

「App Service」の追加作業 (「マネージドID」の設定)

前の手順で作成した「App Service」リソースの画面を開きます。

左側メニューより「ID」を選択します。

上部のタブより「ユーザー割り当て済み」タブを選択します。

上部メニューにある「追加」をクリックします。

表示されたマネージドIDの一覧より、Bot Serviceを作成した時に併せて作成された「マネージドID」を選択します。 (Bot Serviceと名前が同じものを選択します)

選択後、「追加」をクリックします。

「ユーザー割り当て済みマネージドID」の一覧画面に戻りますので、追加したマネージドIDが表示されていることを確認します。

「App Service」の追加作業 (「構成」の設定)

「App Service」リソースの画面で、左側メニューより「構成」を選択します。

今から、この画面で設定を行なっていきます。 (画面は閉じずにこのままにしておきます)

Webブラウザの別のウィンドウまたはタブで、前の手順で作成した「Bot Service」リソースの画面を開きます。

左側メニューより「構成」を選択します。

この画面に表示されている「値」を参照して、App Serviceの「構成」画面で設定を行います。

App Serviceリソースの「構成」画面に戻り、「アプリケーション設定」のメニューにある「新しいアプリケーション設定」をクリックします。

「名前」と「値」の組を入力して、「OK」で保存します。

名前 値
MicrosoftAppType Bot Service「構成」画面の「ボットタイプ」の値
(固定値「UserAssignedMSI」)
MicrosoftAppId Bot Service「構成」画面の「Microsoft App Id」の値
(XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 形式)
MicrosoftAppTenantId Bot Service「構成」画面の「アプリテナントID」の値
(XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 形式)

「新しいアプリケーション設定」の操作を繰り返して、合計3つの属性を設定します。

3つの属性が設定されたことを確認します。

上部メニューの「保存」をクリックします。

確認メッセージが表示されます。 (設定を変更するとアプリケーションの再起動が行われる旨が書かれています)

「続行」をクリックします。

「Bot Service」の追加作業 (「構成」の設定)

「App Service」リソースの画面で、左側メニューより「構成」を選択します。

画面右側にある「規定のドメイン名」に表示されているドメイン名 (XXXXXXXX.azurewebsites.net) をクリップボードにコピーしておきます。

「Bot Service」リソースの画面に移動して、左側メニューより「構成」を選択します。

「メッセージングエンドポイント」に以下のようにURLを入力します。

項目名 設定値
メッセージングエンドポイント https://＜App Serviceのドメイン名＞/api/messages
(https://XXXXXXXX.azurewebsites.net/api/messages)

入力後、一番下にある「適用」をクリックします。

(5) Azure環境にアプリケーションをデプロイする

構築したAzure環境に対して、ステップ(2)〜(3)で作成したアプリケーションをデプロイします。 デプロイは、ローカル環境でAzure CLIを使って行います。

まず、アプリケーションのディレクトリ (エントリポイントであるindex.jsが存在するディレクトリ) へ移動します。

cd my-chat-bot

アプリケーション資産の一式をzipで圧縮します。 圧縮対象のディレクトリ、zipファイルを生成するディレクトリを間違えないようにしてください。

  • 圧縮対象のディレクトリ： カレントディレクトリ
  • zipファイルを生成するディレクトリ： 親ディレクトリ
zip -r ../deploy.zip .

圧縮が終わったら、1つ親のディレクトリ (作成されたzipファイルが存在するディレクトリ) へ移動します。

cd ..

App Service (Webアプリ) のアプリケーションをデプロイするAzure CLIコマンドを実行します。

「リソースグループ名」「App Service (Webアプリ) の名前」は、皆さんの環境に合わせて入力してください。

az webapp deployment source config-zip --resource-group "＜リソースグループ名＞" --name "＜App Service (Webアプリ) の名前＞" --src ./deploy.zip

コマンドを実行しましたら、デプロイが正常に開始されることを確認します。

$ az webapp deployment source config-zip --resource-group "resourcegroup" --name "kumamon-chatbot-app" --src ./deploy.zip
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202

ステータスコード「202」(HTTP Accept) が表示されていれば、デプロイ開始しています。

ここからしばらく時間がかかりますので待ちます。 (特に、初回のデプロイは時間がかかるようです)

デプロイが完了すると、結果が表示されます。

{
  "active": true,
  "author": "N/A",
  "author_email": "N/A",
  "build_summary": {
    "errors": [],
    "warnings": []
  },
  "complete": true,
  ・・・
  (中略)
  ・・・
}

エラーが表示されていないことを確認します。

Azureポータルの「App Service」リソース画面でデプロイの履歴を確認することもできます。

左側メニューより「デプロイセンター」を選択して、上部のタグより「ログ」タグを選択します。

ログの「状態」欄に「成功」と表示されていれば、デプロイは問題なく完了しています。

(6) Azureポータル画面からチャットボットをテストする

これで、Azure上でチャットボットのアプリケーションが動作するようになりました。

チャットクライアント (Microsoft TeamsやSlackなど) との連係設定をまだ行なっていないためクライアントからの利用はできませんが、Azureポータルの画面からチャットの動作をテストすることができます。

「Bot Service」リソース画面で、左側メニューより「Webチャットでテスト」を選択します。

ボットからの最初のメッセージが表示されれば、アプリケーションは正常に動作しています。

App Serviceへのデプロイ直後は、アプリケーションが起動するのに少し時間を要します。 もし何もメッセージが表示されない場合は、しばらく経ってから、画面上部の「最初からやり直す」をクリックしてみてください。

「Bot Framework Emulator」でテストを行ったのと同様に、チャットボットで「オウム返し」のやり取りができることを確認しましょう。

(7) Microsoft Teamsから利用できるように設定する

Azureポータル画面で動作テストできましたので、実際のチャットクライアントから利用できるように設定しましょう。

今回は、Microsoftの「Teams」から利用できるように設定を行います。

(Microsoft 365の契約内容によっては当記事の手順で設定を行なっても、利用できない場合があるかもしれません。ご了承ください)

「Bot Service」リソース画面で、左側メニューより「チャンネル」を選択します。

画面右側の「使用可能なチャネル」のリストから「Microsoft Teams」を探します。

「Microsoft Teams」の部分がリンクになっているので、クリックします。

「サービス条件」画面が表示されます。

「同意します」にチェックを入れて、「同意」をクリックします。

「Microsoft Teams」チャンネルの設定画面が表示されます。

「メッセージング」タブを選択して、使用するMicrosoft Teamsの種類を選択します。 (一般の企業等であれば「Microsoft Teams Commercial」を選択することになると思います)

「適用」をクリックします。

設定が保存されたことを確認して、上部メニューにある「閉じる」をクリックします。

(8) Microsoft Teamsから利用してみる

設定済みの「チャネル」のリストから「Microsoft Teams」の行を確認します。

右端の「Open in Teams」がリンクになっているので、クリックします。

(この時、Microsoft Teamsにサインインしていない場合は、先にサインインしておいた方が良いかもしれません)

Webブラウザで「Microsoft Teams」の画面が表示されるので、TeamsアプリまたはWebアプリのいずれかを選択します。 (私の環境では「Webアプリ」を選択しました)

Teamsの画面が表示されて、作成したチャットボットが表示されることを確認します。

何か入力してみると、チャットボットが「オウム返し」してくれることを確認できました。

本来は最初に表示されるはずの「こんにちは、ようこそ！」が表示されるタイミングが、何だかおかしいですね。 アプリケーション側で対応が必要なのかもしれません。

おわりに

今回の記事では、「生成AIチャットボット」を作成するための最初のステップとして「Azure AI Bot Service」を使ったシンプルなチャットボットを作成しました。

Microsoft Teamsの他にもSlackやLINEなどが「Bot Service」に対応した「チャンネル」として用意されています。 Teams以外のチャットクライアントを使いたい方は、試してみるとよろしいかと思います。

次のステップでは、今回作成したチャットボットに「Azure OpenAI」サービスを組み込んで、いよいよ「生成AIチャットボット」を作成します。

Share this article

facebook logohatena logotwitter logo

関連記事

Azure AI Bot ServiceとAzure OpenAIを使って「生成AIチャットボット」を作ってみる – 第2回：生成AIを使って質問に回答できるようにする

Azure AI Bot ServiceとAzure OpenAIを使って「生成AIチャットボット」を作ってみる – 第2回：生成AIを使って質問に回答できるようにする

User avatar
青柳英明
2023.11.20
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.